﻿<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="${ctx}/js/jquery-1.3.2.min.js"></script>
	<title>丁丁优惠-客户关系管理系统</title>
	<style>
* { padding: 0; margin: 0; border: 0; }
html,body{
	width:100%;
	height:100%;
}
.crm-login-wrap{
	margin:0 auto;
	min-width:980px;
	width:100%;
	height:100%;
}
.crm-login-banner{
	min-width:980px;
	height:20%;
	position:relative;
	background:url(../images/index/top-bg.png);
	border-bottom:1px solid #EE2626;
}

.crm-login-logo{
	margin:0 auto;
	width:980px;
	position:relative;
	height:100%;
}
.crm-login-logo tr td{
	
	height:50%;
}
.crm-login-login{
	min-width:980px;
	height:522px;
	position:relative;
	background:url(../images/index/theme.jpg) repeat-x;
	border-bottom:1px solid #E0E0E0;
}
.crm-login-form-wrap{

	margin:0 auto;
	width:980px;
	height:426px;
	padding:96px 0 0 0;
	background:url(../images/index/0.jpg) no-repeat;
}
.crm-login-form{
	width:298px;
	height:312px;
	margin-right: 33px;
	margin-top: 5px;
	padding:23px 0 0 20px;
	background:#fff;
	opacity:0.9;
	border-radius:5px;
	float:right;
	border-left:1px solid #C7EAFF;
	border-top:1px solid #C7EAFF;
	box-shadow:1px 1px 0 #ffffff;
}
.crm-login-form-account{
	width:264px;
	padding-left:10px;
	height:54px;
	border:1px solid #ccc;
	margin-bottom:17px;
}
.crm-login-form-code{
	width:121px;
	height:54px;
	padding-left:10px;
	border:1px solid #ccc;
	vertical-align: middle;
}
.crm-login-form-img{
	vertical-align: middle;
	height:56px;
	width:133px;
}
.crm-login-form-btn{
	margin-top:25px;
	background-color: #759AE9;
	background-image: -webkit-linear-gradient(top, #FF2C2C 0%, #B10707 50%, #A50000 50%, #A50000 100%);
	background-image: -moz-linear-gradient(top, #FF2C2C 0%, #B10707 50%, #A50000 50%, #A50000 100%);
	background-image: -ms-linear-gradient(top, #FF2C2C 0%, #B10707 50%, #A50000 50%, #A50000 100%);
	background-image: -o-linear-gradient(top, #FF2C2C 0%, #B10707 50%, #A50000 50%, #A50000 100%);
	background-image: linear-gradient(top, #FF2C2C 0%, #B10707 50%, #A50000 50%, #A50000 100%);
	border-top: 1px solid #C5E2F3;
	border-right: 1px solid #F52D2D;
	border-bottom: 1px solid #F22C2C;
	border-left: 1px solid #F62D2D;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: 0 0 8px 2px rgba(148, 168, 179, 0.9);
	-moz-box-shadow:  0 0 8px 2px rgba(148, 168, 179, 0.9);
	box-shadow:  0 0 8px 2px rgba(148, 168, 179, 0.9);
	color: white;
	text-shadow: 0 1px 1px rgba(148, 168, 179, 0.9);
	text-align:center;
	height:59px;
	width:262px;
	line-height:59px;
	font-size:24px;
	font-family:"Microsoft YaHei" ;
	}
.crm-login-bottom{
	min-width:980px;
	height:22%;
	position:relative;
	background:url(../images/index/bottom-bg.png) repeat;
	padding-top:8px;
	border-top:1px solid #FBFBFB;
}
.crm-login-bottom-switch{
	list-style:none;
	margin:0 auto;
	width:102px;
	height:20px;
}
.crm-login-bottom-switch li{
	width:16px;
	height:16px;
	background:url(../images/index/gray-dot.png) no-repeat;
	float:left;
	margin-left:27px;
}
.crm-login-bottom-switch .li{

	background:url(../images/index/red-dot.png) no-repeat;
}
.crm-login-bottom-switch li:first-child{

	margin-left:0px;
}
</style>
</head>
<body>
<div class="crm-login-wrap">
	<div class="crm-login-banner">
		<table class="crm-login-logo">
		
<tr>
<td></td>
</tr>
		
<tr>
<td><img src="${ctx}/images/index/logo.png" alt="丁丁优惠 CRM"   /></td>
</tr>
		
</table>
	</div>
	
	
	<div class="crm-login-login" id="login">
		<div class="crm-login-form-wrap" id="crm-login-bg">
		<div class="crm-login-form">
			<form action="${ctx}/crmuser/login" method="post" name="userlogin">
				<input type="text" name="userName" id="userName" value="${userName!}" size="14" onkeydown="checksub(event.keyCode)"  placeholder="请输入用户名" class="crm-login-form-account"/>
				<input    id="userPass"  type="password" name="userPass"  placeholder="请输入密码" class="crm-login-form-account"/>
				<p> 
					<input type="text"  onkeydown="checksub(event.keyCode);"  name="verificationCode" id="verificationCode" placeholder="验证码" class="crm-login-form-code"/>
					<img id="createCheckCode" src="${ctx}/images/loading.gif" style="cursor:pointer;"  class="crm-login-form-code"  onclick="myReload()" title="点击更换图片">
					</p>
				<input   onclick="return sub();"  style="cursor:pointer;" type="button" value="登  录" class="crm-login-form-btn" />
			</form>
			</div>
		</div>
	</div>
	<div class="crm-login-bottom">
		<ul class="crm-login-bottom-switch" id="crm_bg">
			<li class="li" onclick="bgswitch(this,0)"></li>  
			<li  onclick="bgswitch(this,1)"></li>
			<li  onclick="bgswitch(this,2)"></li>
		</ul>
	
	</div>
</div>
	<script type="text/javascript">
			document.getElementById("login").style.background = "#0056a8"
				function bgswitch(selected,type){
				var crm_bg = document.getElementById("crm_bg");
				var lista = crm_bg.getElementsByTagName("li");
				var bg=document.getElementById("crm-login-bg");
				for(var i = 0;i<lista.length;i++){
					lista[i].style.background="url(${ctx}/images/index/gray-dot.png) no-repeat";
				}
					if ( type == 0){
							document.getElementById("login").style.background = "#0056a8"
					}
					if ( type == 1 ){
						document.getElementById("login").style.background = "#fbfbfb"
					}
					if ( type == 2 ){ 
							document.getElementById("login").style.background = "#63568c"
					}
				selected.style.background="url(${ctx}/images/index/red-dot.png) no-repeat";
				bg.style.background="url(${ctx}/images/index/"+type+".jpg) no-repeat";
				
			}
				
	</script>
	<script type="text/javascript">
	function myReload(){
		$("#createCheckCode").attr("src","${ctx}/images/loading.gif");
		var timenow = new Date().getTime();
	    $("#createCheckCode").attr("src","${ctx}/crmuser/pictureCheckCode?d="+timenow);
	}
	function sub() {
		var userName = document.userlogin.userName.value;
		var pwd = document.userlogin.userPass.value;
		var checkCode = document.userlogin.verificationCode.value;
		if (userName == null || userName == "") {
			alert('请输入用户名!');
			document.userlogin.userName.focus();
			return false;
		}else if (pwd == null || pwd == "") {
			alert('请输入密码!');
			document.userlogin.userPass.focus();
			return false;
		}if(!checkPictureCode()){
			return false;
		}
		document.userlogin.submit();
	}
	//检查验证码
	function checkPictureCode(){
		//$("#verificationCode").attr("class","inputB");
		var code = $("#verificationCode").val();
		if(code == ""){
			alert('请输入验证码!');
			$("#verificationCode").focus();
			return false;
		}
		var isCheckPictureCode = false;
		$.ajax({
			type:"post",
			data:{"code":encodeURIComponent(code)},
			url:"${ctx}/crmuser/checkCode",
			async:false,
			success:function(data){
				if (data == "0") {
					alert("验证码输入错误");
					//setValue("promptVerificationCode", "验证码输入错误");
				} else {
					//showAndhide("spanVerificationCode", "promptVerificationCode");
					isCheckPictureCode = true;
				}
			}
		});
		return isCheckPictureCode;
	}
	function checksub(e) {
		if (e == 13) {
			sub();
		}
	}
	myReload();
	<#if msg?exists>
		alert("${msg}");
	</#if>
</script>
</body>
</html>